<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
   <div class="dashboard-container" id="food-app">
     <h1>查询最高气温</h1><hr>
     <div id="main" style="width: 1000px;height:800px;"></div>

     </div>

  </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/food.js"></script>
   <script src="../../api/weather.js"></script>
   <script src="../../api/date.js"></script>


   <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

   <script>
      new Vue({
        el: '#food-app',
        data() {
          return {
            chartData:{}
          }
        },
        computed: {},
        created() {
        },
        mounted() {
          this.drawChart()
        },
        methods: {

          /*绘制图表*/
          drawChart(){

            getHighest().then(res=>{
              this.chartData = res.data;
              var len = this.chartData.length;
              var x=this.chartData.map(function (data){return data.date});
              var y=this.chartData.map(function (data){return data.highestTemperature});

              //console.log("查询成功：大小 "+len);
              // console.log(x)
              console.log(y)
              var myChart = echarts.init(document.getElementById('main'));
              var option = {
                title: {
                  text: '历年最高气温', // 主标题
                  subtext: '', // 副标题
                  x: 'left' // x轴方向对齐方式
                },
                tooltip: {
                  trigger: 'axis' // axis   item   none三个值
                },
                xAxis: {
                  type: 'category', // 还有其他的type，可以去官网喵两眼哦
                  data: x, // x轴数据
                  name: '年份' // x轴名称
                  // x轴名称样式
                  // nameTextStyle: {
                  //   fontWeight: 600,
                  //   fontSize: 18
                  // }
                },
                yAxis: {
                  type: 'value',
                  name: '温度',// y轴名称
                  data: y,
                  // y轴名称样式
                  // nameTextStyle: {
                  //   fontWeight: 600,
                  //   fontSize: 18
                  // }
                },
                legend: {
                  orient: 'vertical',
                  x: 'center',
                  y: 'top',
                  data: ['温度']
                },
                series: [
                  {
                    name: '温度',
                    data: y,
                    type: 'line'
                  }
                ]
              };
              myChart.setOption(option);
            })

          }
        }
      })
    </script>
</body>
</html>